<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/favicon.ico" />
    <title>对话框</title>
    <link href="__libs__/layui/css/layui.css?v=__lkversion__" rel="stylesheet">
    <script type="text/javascript" src="__libs__/jquery/jquery.min.js?v=__lkversion__"></script>
    <script src="__libs__/layui/layui.js?v=__lkversion__" type="text/javascript"></script>
    <script src="__libs__/push/pusher.min.js?v=__lkversion__" type="text/javascript"></script>
    <script src="__libs__/layer/layer.js?v=__lkversion__" type="text/javascript"></script>
    <script src="__libs__/jquery/jquery.cookie.js?v=__lkversion__" type="text/javascript"></script>
    <link href="__style__/admin/index_me.css?v=__lkversion__" type="text/css" rel="stylesheet" />

    <script>
       

        function getnews(cha) {
            $.ajax({
                url:YMWL_ROOT_URL+"/admin/set/getmessage",
                type: 'post',
                data: {visiter_id:cha},
                success: function (res) {

                    if (res.code == 0) {
                       if(res.data != 0){
                        
                          
                           $("#c"+cha).css("display","inline-block");
                           $("#c"+cha).text(res.data);

                          
                       }else{
                         $("#c"+cha).css("display","none");
                       }
                    }
                }
            });
        }


        var wolive_connect = function () {
            var pusher = new Pusher('{$app_key}', {encrypted: {$value}
                ,enabledTransports: ['ws']
                ,wsHost: '{$whost}'
                ,{$port}: {$wport}
                ,authEndpoint: '/auth.php'
                ,disableStats: true
            });

            var value = {$arr['service_id']};
            var channel = pusher.subscribe("kefu"+value);
                channel.bind("cu-event", function (data) {
                    // 获取未读消息数
                    getnews(data.message.visiter_id);
                    var str = data.message.content;
                    str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {

                        var pos = capture.lastIndexOf("/");
                        var value = capture.substring(pos + 1);

                        if (value.indexOf("emo") == 0) {
                            str = '[表情]';
                        } else {
                            str = '[图片]';
                        }
                    });

                    str = str.replace(/<div><a[^<>]+>.+?<\/a><\/div>/,'[文件]');
                    $.cookie(data.message.channel,str);
                    $("#msg" + data.message.channel).html(str);
                    getchat();

            });


            // 通知 游客离线
            channel.bind("logout", function (data) {
                 getchat();
            });

            channel.bind("geton", function (data) {
                getchat();
            });

            // 认领后获取访客信息
            var channelme = pusher.subscribe("ud" + value);
            channelme.bind("on_notice", function (data) {
                getwait();
                getchat();

            });
            // 公共频道
            var all = "{$arr['business_id']}";
            var channelall = pusher.subscribe("all" + all);
            channelall.bind("on_notice", function (data) {
                layer.msg(data.message, {offset: "20px"});
                getwait();
            });
            pusher.connection.bind('state_change', function(states) {
                // states = {previous: 'oldState', current: 'newState'}
                if(states.current == 'unavailable' || states.current == "disconnected" || states.current == "failed" ){
//                    pusher.disconnect();
                    pusher.unsubscribe("kefu" + value);
                    pusher.unsubscribe("all" + all);
                    pusher.unsubscribe("ud"+value);
                    wolive_connect();
                }

            });

            pusher.connection.bind('connected', function() {
               getchat();
               getwait();
            });
        }
    </script>
    <style>
        *{
            -webkit-overflow-scrolling: touch;
        }
        ::-webkit-scrollbar {
            display: none;
        }

        .visiter {
            width: 100%;
            height: 80px;
            position: relative;
            border-bottom: 1px solid #dddddd;
        }

        .waiter {
            width: 94%;
            height: 60px;
            padding: 12px;
            position: relative;
        }

        .hide {
            display: none;
        }
        .myicon {
            position: absolute;
            right: 2px;
            top: 3px;
            cursor: pointer;
        }

        .visit_content {
            display:block;
            cursor: pointer;
            position: absolute;
            left: 9px;
            top: 5px;
            width: 90%;
            height: 90%;
        }

        .v-avatar {
            position: absolute;
            top: 6px;
            border-radius: 5px;
        }

        .c_name {
            position: absolute;
            left: 70px;
            top: 8px;
            font-size: 20px;
            font-weight: 200;
        }

        .newmsg {
            position: absolute;
            bottom: 8px;
            left: 70px;
            font-size: 16px;
            color: #8D8D8D;
            width: 70%;
            height: 20px;
            overflow: hidden;
        }

        .list {
            display: inline-block;
            width: 50%;
            height: 50px;
            font-size: 20px;
            text-align: center;
            line-height: 47px;
            background:#3c3c3c;
            border-bottom: 3px solid #c9c9c9;;
        }
        .onclick{
            background: #0C0C0C;
            border-bottom: 3px solid #1b961b;
        }
        .notice-icon{
            display: inline-block;
            color: #FFFFFF;
            position: absolute;
            right: 2px;
            top: 26px;
            width: 20px;
            height: 20px;
            background: #D92F2F;
            text-align: center;
            border-radius: 20px;
            line-height: 20px;
        }
        .icon_gray {
            -webkit-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
       .waiticon{
           display: inline-block;
           color: #FFFFFF;
           position: absolute;
           right: 2px;
           width: 20px;
           height: 20px;
           background: #D92F2F;
           text-align: center;
           border-radius: 20px;
           line-height: 20px;
           font-size: 15px;
       }
        .no_chats-pic {
            display: inline-block;
            width: 138px;
            height: 67px;
            background: url('__image__/admin/bgspirt.png') no-repeat;
            background-position: -286px;
            position: absolute;
            top: 300px;
            left: 250px;
        }

        .no_history_icon {
            display: inline-block;
            width: 90px;
            height: 67px;
            background: url('__image__/admin/bgspirt.png') no-repeat;
            background-position: -90px;
            position: absolute;
            top: 300px;
            left: 44%;
        }
    </style>

</head>
<body>
<section>

    <header class="" style="width: 100%;height: 50px;color: #FFFFFF;">
        <span class="list onclick"  title="chat" onclick="choose(this)">当前对话</span><span class="list" title="wait" onclick="choose(this)">排队列表<div id="waitnum" class="hide" ></div></span>
    </header>
    <setion id="chatlist" style="overflow-y: auto;">


    </setion>
    <setion id="waitlist"  style="overflow-y: auto;display: none;">
   

    </setion>
</section>

<script>
    var choose =function (obj) {
        $(obj).addClass("onclick");
        $(obj).siblings().removeClass('onclick');
        var falg =$(obj).attr('title');
        if(falg == 'chat'){
            $("#chatlist").show();
            $("#waitlist").hide();
        }else{
            $("#chatlist").hide();
            $("#waitlist").show();
        }
    }

    // 排队人数
    var getwaitnum=function () {
        $.ajax({
            url:YMWL_ROOT_URL+"/admin/set/getwaitnum",
            success:function(res){
                if(res.data != 0){
                    $("#waitnum").removeClass("hide");
                    $("#waitnum").addClass("waiticon");
                    $("#waitnum").text(res.data);
                }else if(res.data == 0){
                    $("#waitnum").removeClass("waiticon");
                    $("#waitnum").addClass("hide");
                }
            }
        });
    }

// 认领
function get(id) {
    $.ajax({
        url:YMWL_ROOT_URL+"/admin/set/get",
        type: "post",
        data: {visiter_id: id},
        success: function (res) {
            layer.msg("认领成功", {offset: "20px"});
            getwait();
            getchat();
        }
    });
}


    function cut(id) {

    var data = $.cookie("cu_com");
    var visiter_checked;
    if (data) {
        var jsondata = $.parseJSON(data);
        visiter_checked = jsondata.visiter_id;
    }
    $.ajax({
        url:YMWL_ROOT_URL+"/admin/set/deletes",
        type: "post",
        data: {
            visiter_id: id
        },
        dataType:'json',
        success: function (res) {

           if(res.code == 0){
                  layer.msg("删除成功", {offset: "20px"});
                }
               
                // 删除修改
                getchat();
           
        }
    })
}


    // 获取排队列表
    function getwait() {

    $.ajax({
        url:YMWL_ROOT_URL+"/admin/set/getwait",
        dataType:'json',
        success: function (res) {

            if (res.code == 0) {
                // alert(res);
               $("#waitlist").empty();
                var a = "";
                $.each(res.data, function (k, v) {


                    if(v.state == "online"){
                        a += '<div class="waiter">';
                        a += '<img id="img'+v.visiter_id+'" class="am-radius w-avatar" src="' + v.avatar + '" width="50px" height="50px"><span class="wait_name">' + v.visiter_name + '</span>';
                        a += '<i class="mygeticon " title="认领" onclick="get(' + "'" + v.visiter_id + "'" + ')"></i></div>';
                    }else{
                        a += '<div class="waiter">';
                        a += '<img id="img'+v.visiter_id+'"  class="am-radius w-avatar icon_gray"  src="' + v.avatar + '" width="50px" height="50px"><span class="wait_name">' + v.visiter_name + '</span>';
                        a += '<i class="mygeticon " title="认领" onclick="get(' + "'" + v.visiter_id + "'" + ')"></i></div>';
                    }

                });

                 $("#waitlist").append(a);
                 
                 $("#waitnum").removeClass("hide");
                 $("#waitnum").addClass("waiticon");
                 $("#waitnum").text(res.num);
            } else {

                $("#waitlist").empty();
                 $("#waitnum").removeClass("waiticon");
                $("#waitnum").addClass("hide");
            }
        }

    });
}


    function getchat() {
    $.ajax({
        url:YMWL_ROOT_URL+"/admin/set/getchats",
        success: function (res) {
            $("#chatlist").empty();
            
            if (res.code == 0) {
                var sdata = $.cookie('cu_com');
                if (sdata) {
                    var json = $.parseJSON(sdata);
                    var debug = json.visiter_id;
                } else {
                    var debug = "";
                }
                var data = res.data;
                var a = '';
                $.each(data, function (k, v) {

                    var str = JSON.stringify(v);
                   
                     if (v.state == 'online') {

                           if(v.count == 0){
                                a+='<div class="visiter">';
                                a+='<i class="layui-icon " title="删除" style="font_weight:blod;position: absolute;right: 5px;top:6px;" onclick="cut('+"'"+v.visiter_id+"'"+')">&#x1006;</i>';
                                a+='<a class="visit_content" href="/weixin/chat/talk?channel='+v.channel+'&avatar='+v.avatar+'">';
                                a+='<img class="v-avatar" src="'+v.avatar+'" width="60px" height="60px">';
                                a+='<span class="c_name">'+v.visiter_name+'</span><div id="msg'+v.visiter_id+'" class="newmsg">'+v.content+'</div></a>';
                                a+='<span id="c'+v.visiter_id+'" class="notice-icon" style="display: none;"></span></div>';
                           }else{
                               a+='<div class="visiter">';
                                a+='<i class="layui-icon " title="删除" style="font_weight:blod;position: absolute;right: 5px;top:6px;" onclick="cut('+"'"+v.visiter_id+"'"+')">&#x1006;</i>';
                                a+='<a class="visit_content" href="/weixin/chat/talk?channel='+v.channel+'&avatar='+v.avatar+'">';
                                a+='<img class="v-avatar" src="'+v.avatar+'" width="60px" height="60px">';
                                a+='<span class="c_name">'+v.visiter_name+'</span><div id="msg'+v.visiter_id+'" class="newmsg"></div></a>';
                                a+='<span id="c'+v.visiter_id+'" class="notice-icon">'+v.count+'</span></div>';
                           }
                               
                      } else {

                           if(v.count == 0){
                                a+='<div class="visiter">';
                                a+='<i class="layui-icon " title="删除" style="font_weight:blod;position: absolute;right: 5px;top:6px;" onclick="cut('+"'"+v.visiter_id+"'"+')">&#x1006;</i>';
                                a+='<a class="visit_content" href="/weixin/chat/talk?channel='+v.channel+'&avatar='+v.avatar+'">';
                                a+='<img class="v-avatar icon_gray" src="'+v.avatar+'" width="60px" height="60px">';
                                a+='<span class="c_name">'+v.visiter_name+'</span><div id="msg'+v.visiter_id+'" class="newmsg">'+v.content+'</div></a>';
                                a+='<span id="c'+v.visiter_id+'" class="notice-icon" style="display: none;"></span></div>';
                           }else{
                                a+='<div class="visiter">';
                                a+='<i class="layui-icon " title="删除" style="font_weight:blod;position: absolute;right: 5px;top:6px;" onclick="cut('+"'"+v.visiter_id+"'"+')">&#x1006;</i>';
                                a+='<a class="visit_content" href="/weixin/chat/talk?channel='+v.channel+'&avatar='+v.avatar+'">';
                                a+='<img class="v-avatar icon_gray" src="'+v.avatar+'" width="60px" height="60px">';
                                 a+='<span class="c_name">'+v.visiter_name+'</span><div id="msg'+v.visiter_id+'" class="newmsg">'+v.content+'</div></a>';
                                a+='<span id="c'+v.visiter_id+'" class="notice-icon">'+v.count+'</span></div>';
                               
                          }
                     }

                                  
                 });
                $("#chatlist").append(a);
            } 
        }
    });
}
    var init =function () {
        getwait();
        getchat();
        // 获取最近的一条消息显示
    }

    window.onload=init();
    wolive_connect();

</script>
</body>
</html>
